<template>
	<div class="login_cont">
		<div class="login_nav">
			<div class="nav_slider">
				<router-link class="signin" to="/login" active-class="focus">登录</router-link>
				<router-link class="signin" to="/reg" active-class="focus">注册</router-link>
			</div>
		</div>
		<form>
			<div class="input_signin active">
				<input class="input" type="text" placeholder="用户名" v-model="username">
				<div class="hint">请输入用户名</div>
				<input class="input" type="password" placeholder="密码" v-model="password">
				<div class="hint">请输入密码</div>

				<input type="button" value="登入" @click="login">
			</div>
			{{mess}}
		</form>
	</div>
</template>

<script>
	export default {
		name: 'login',
		props: {},
		data() {
			return {
				username: "",
				password: "",
				nikename: "",
				mess: ""
			};
		},
		components: {},
		mounted() {},
		updated() {},
		methods: {

			login() {
				//表单校验业务
				this.$axios({
					url: '/api/login',
					method: 'post',
					data: {
						username: this.username,
						password: this.password
					}
				}).then(
					res => {
						if (res.err === 0) {
							//种token
							window.localStorage.setItem('user', JSON.stringify(res));
							//跳转之前|user
							if (this.$route.query.backpath) {
								this.$router.push({
									path: this.$route.query.backpath
								})
							} else {
								let local = window.localStorage.getItem('user');
								let loginname = JSON.parse(local).data.nikename;
								alert("欢迎回来(" + loginname + ")最近有什么py的交易么？");
								this.$router.push('/home');
							}
						} else {
							this.mess = res.msg
						}
					}
				)
			}
		}
	};
</script>

<style scoped>
	.login_cont {
		min-height: 600px;
	}
	.header {
		text-align: center;
	}
	.header h1 {
		font-size: 200%;
		color: #333;
		margin-top: 30px;
	}
	.header p {
		font-size: 12px;
	}
	body {
		margin: 0;
		color: #555;
		font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
		font-size: 15px;
	}
	a {
		color: #555;
		text-decoration: none;
	}
	input,
	textarea {
		border: 1px solid #ddeafb;
	}
	input[type=submit],
	input[type=button] {
		cursor: pointer;
	}
	input {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		outline: none;
		margin-bottom: 5px;
		border-radius: 5px;
	}
	.hint {
		font-size: 12px;
		text-align: right;
		padding-right: 10px;
		margin-bottom: 15px;
		visibility: hidden;
	}
	.right {
		border-color: #1dc091;
	}
	.hint_right {
		color: #1dc091;
	}
	.wrong {
		border-color: #EA5A70;
	}
	.hint_wrong {
		color: #EA5A70;
	}
	input[type=button],
	.button {
		display: block;
		margin: 0 auto;
		line-height: 20px;
		font-size: 20px;
		color: #fff;
		background: #0f88eb;
		border: 0;
	}
	.lable {
		display: inline-block;
	}
	.nav {
		width: 400px;
		height: 40px;
		margin: 0 auto;
		background: #0F88EB;
	}
	.nav_left,
	.nav_right {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 49%;
		height: 30px;
		line-height: 30px;
		font-size: 24px;
	}
	.nav_left a,
	.nav_right a {
		color: white;
	}
	.nav_left {
		padding-left: 20px;
		text-align: left;
	}
	.nav_right {
		padding-right: 20px;
		text-align: right;
	}
	.number,
	.time {
		display: inline-block;
		width: 50%;
	}
	.time,
	.msge {
		text-align: right;
	}
	.msge a {
		color: #fb752d;
	}
	.login_cont {
		margin: 50px auto 0;
		width: 300px;
	}
	.login_cont .input_signup,
	.login_cont .input_signin {
		display: none;
	}
	.login_cont .active {
		display: block;
	}
	.login_nav {
		width: 300px;
		height: 45px;
		text-align: center;
		margin-bottom: 20px;
	}
	.nav_slider {
		display: inline-block;
	}
	.nav_slider a {
		display: inline-block;
		width: 75px;
		line-height: 35px;
		font-size: 18px;
		text-decoration: none;
	}
	.nav_slider .focus {
		border-bottom: 2px solid #3cf;
	}
	.forget {
		width: 100%;
		text-align: right;
	}
	.forget a {
		text-decoration: none;
	}
</style>
